{% extends 'base.html' %}

{% block title %}{{ blog_meta.name }}{% endblock %}
{% block header %}
<!-- <header class="intro-header" style="background-image: url('http://7d9q7a.com1.z0.glb.clouddn.com/mayblog-home-bg.jpg')"> -->
<header class="intro-header" style="background-image: url({{ bg_home }})">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                    <div class="site-heading">
                        <h1>{{ blog_meta.name }}</h1>
                        <hr class="small">
                        <span class="subheading">{{ blog_meta.subtitle }} <a href="{{ url_for('main.recent_feed') }}"><i class="fa fa-rss"></i></a></span>
                    </div>
                </div>
            </div>
        </div>
    </header>
{% endblock %}

{% block main %}
<div class="container">
    <div class="row">
        <div class="col-lg-6 col-lg-offset-2 col-md-8 col-md-offset-1">
            {% for post in posts.items %}
            <div class="post-preview">
                <a href="{{ url_for('main.post_detail', slug=post.slug) }}">
                    <h2 class="post-title">
                        {{ post.title }}
                    </h2>
                </a>
                <p class="post-subtitle">
                    {{ post.abstract }}
                </p>
                <p class="post-meta">Posted by <a href="{{ url_for('main.author_detail', username=post.author.username) }}">{{ post.author.display_name }}</a> on {{ moment(post.pub_time).format('YYYY/MM/DD, h:mm a') }}</p>
                <p class="post-meta">category: <a href="?category={{ post.category }}">{{ post.category }}</a></p>
                <p class="post-meta">Tags:
                            {% for tag in post.tags %} <a href="{{ url_for('main.index') }}?tag={{ tag }}">{{ tag }}</a>  {% endfor %}
                </p>
            </div>
            {% if not loop.last %}
            <hr>
            {% endif %}
            {% else %}
                <p class="post-subtitle">
                    No articles found here
                </p>
            {% endfor %}
            <!-- Pager -->
            <ul class="pager">
                {% if posts.has_next %}
                <li class="next">
                    <a href="?page={{ posts.next_num }}
                        {%- if cur_category %}&category={{ cur_category }}{% endif %}
                        {%- if cur_tag %}&tag={{ cur_tag }}{% endif %}">Older Posts &rarr;</a>
                </li>
                {% endif %}
                {% if posts.has_prev %}
                    <li class="next"><a href="?page={{ posts.prev_num }}
                        {%- if cur_category %}&category={{ cur_category }}{% endif %}
                        {%- if keywords %}&keywords={{ keywords }}{% endif %}
                        {%- if cur_tag %}&tag={{ cur_tag }}{% endif %}">Previous Posts</a></li>
                {% endif %}
            </ul>
        </div>
        

        <div class="col-lg-3 col-md-2">
            <h3>Search</h3><hr/>
            <form id="search-form">
              <div class="form-group">
                <div class="input-group">
                  <div class="input-group-addon"><i class="fa fa-search"></i></div>
                  <input type="text" class="form-control" id="search" name="keywords" placeholder="search" value="{% if keywords %}{{ keywords }}{% endif %}">
                </div>
              </div>
              <!-- <button type="submit" class="btn btn-default">Transfer cash</button> -->
            </form>
            <!-- <hr> -->
            <br>

            <h3>Tags</h3><hr/>
            {% for tag in tags %}
                <a href="?tag={{tag}}" class="post-tag">
                    {% if tag == cur_tag %}
                    <span class="label label-primary">
                        {{ tag }}
                        <small><span class="glyphicon glyphicon-remove small rm-filter" aria-hidden="true"></span></small>
                    </span>
                    
                    {% else %}
                    <span class="label label-default">
                        {{ tag }}
                    </span>
                    
                    {% endif %}
                    
                </a>
                &nbsp;
            {% endfor %}

            
            <h3>Category</h3><hr/>
            <div class="list-group">
                {% for category in category_cursor %}
                {% if category and category.name %}
                    {% if cur_category == category.name %}
                        <a href="?category={{ category.name }}" class="list-group-item category-list active">{{ category.name }} 
                        <small><span class="glyphicon glyphicon-remove small rm-filter" aria-hidden="true"></span></small>
                        <span class="badge">&nbsp;{{ category.count }}&nbsp;</span></a>
                    {% else %}
                        <a href="?category={{ category.name }}" class="list-group-item category-list ">{{ category.name }} 
                        <span class="badge">&nbsp;{{ category.count }}&nbsp;</span></a>
                    {% endif %}
                {% endif %}
                {% endfor %}
            </div>


            {% for widget in widgets %}
            <h3>{{ widget.title | safe }}</h3><hr/>
            <div class="list-group">
                {{ widget.html_content | safe }}
            </div>
            {% endfor %}
                        
        </div>
    </div>
</div>

<hr>
{% endblock %}

{% block js %}
{{ moment.include_moment(local_js="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment-with-locales.min.js") }}
<script type="text/javascript">
$('.rm-filter').on('click', function (event) {

    location.href = "/";
    return false;
  });
</script>
{% endblock %}